<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/zhuce.css">
    <link rel="stylesheet" href="../css/tongyong.css">
</head>

<body>
    <h1>欢迎注册，请注册你的账号</h1>
    <h3>请你注册你的账号</h3>
    <div class="jumbotron">
        <div class="login">

            <div class="form-horizontal">
                <div class="form-group">
                    <div class="mop">
                        <label for="username" class="col-sm-2 control-label">用户名:</label>
                    </div>
                    <div class="col-sm-10">
                        <input name="name" type="text" class="form-control inputWidth" placeholder="用户名">
                        <span class="spanspan"></span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="mop">
                        <label for="password" class="col-sm-2 control-label">密码:</label>
                    </div>
                    <div class="col-sm-10">
                        <input name="pwd1" type="password" class="form-control inputWidth" placeholder="密码">
                        <span name="pwdSpan" class="spanspan"></span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="mop">
                        <label for="password" class="col-sm-2 control-label">确认密码:</label>
                    </div>
                    <div class="col-sm-10">
                        <input name="pwd2" type="password" class="form-control inputWidth" placeholder="确认密码">
                        <span class="spanspan"></span>

                    </div>
                </div>
                <div class="form-group">
                    <div class="mop">
                        <div class="mop">
                            <label for="password" class="col-sm-2 control-label">验证码:</label>
                        </div>
                    </div>
                    <div class="col-sm-10">
                        <input name="vc" type="text" class="form-control inputWidth" id="ac" placeholder="验证码"><span class="iii"> <a id="sc"></a></span>
                        <span class="kkk" name="reset">看不清换一个</span>
                    </div>
                    <p><span name="vcSpan" class="spanspan aop"></span></p>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10 lll">
                        <button class="btn btn-default pointer">注册</button>
                    </div>
                </div>
                <div name="msg" class="nop"></div>
            </div>
        </div>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/myAjax.js"></script>
    <script>
        //实现验证码
        //向标签中写入验证码点击验证码可以刷新
        $('#sc').html(setVC()).click(function() {
            $(this).html(setVC())
        });
        //点击标签可以刷新验证码，点击看不清换一个，可以刷新验证码
        $('[name="reset"]').click(function() {
            $('#sc').html(setVC())
        });
        //
        //
        //给注册按钮添加点击事件
        $('button').click(function() {
            //获取数据
            //账号，密码，确认密码，输入的验证码，显示的验证码
            let name = $('[name="name"]').val();
            //输入的账号内容
            let pwd1 = $('[name="pwd1"]').val();
            //输入的密码内容
            let pwd2 = $('[name="pwd2"]').val();
            //输入的确认面内容
            let vc1 = $('[name="vc"]').val();
            //输入的验证码
            let vc2 = $('#sc').html()
                //显示的验证码
                //
                //
                //判断验证信息，如果验证 不通过，输入提示信息，终止程序执行
            if (pwd1 !== pwd2) {
                //密码和确认密码不相等
                //写入提示信息
                $('[name="pwdSpan"]').html('你输入的两个密码不同')
                    //执行return终止程序
                return;
            } else {
                //相同就清除提示信息
                $('[name="pwdSpan"]').html('')
            }
            //
            //
            //
            if (vc1.toLowerCase() !== vc2.toLowerCase()) {
                //输入验证码和显示验证码不同，写入提示信息
                $('[name="vcSpan"]').html('你输入的验证码有误');
                //再次刷新验证码
                $('#sc').html(setVC())
            } else {
                //输入验证码相同，请求提示信息
                $('[name="vcSpan"]').html('')
            }
            //
            //
            //触发注册按钮刷新验证码
            $('#sc').html(setVC())
                //
                //
            const xhr = myPromiseJQueryAjax('../server/goods_res.php', 'post', {
                userName: name,
                userPwd: pwd1
            }, 'json');
            xhr.then(function(res) {
                console.log(res)
                    //注册成功跳转页面，失败就弹出提示框
                if (res.result === 0) {
                    //注册失败，弹出提示框
                    window.alert('注册失败')
                } else if (res.result === 1) {
                    //注册成功，5秒后调组登录页面
                    let tiem = 5;
                    $('[name=msg]').html(`注册成功，${tiem}秒后跳转登录页面`);
                    //使用定时器
                    setInterval(function() {
                        tiem--;
                        if (tiem === 0) {
                            //跳转页面
                            window.location.href = './shouye.html';
                            return;
                        }
                        //写入msg里
                        $('[name="msg"]').html(`注册成功，${tiem}秒后跳转登录页面`)
                    }, 1000)
                }
            })

        })
    </script>
</body>

</html>